<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
            <h2 id="jhi-book-heading" jhiTranslate="jdLdemoApp.book.home.createOrEditLabel">Create or edit a Book</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!book.id">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id"
                        [(ngModel)]="book.id" readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="jdLdemoApp.book.bookName" for="field_bookName" [ngbTooltip]="'jdLdemoApp.book.help.bookName' | translate">Book Name</label>
                    <input type="text" class="form-control" name="bookName" id="field_bookName"
                        [(ngModel)]="book.bookName" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="jdLdemoApp.book.writerName" for="field_writerName" [ngbTooltip]="'jdLdemoApp.book.help.writerName' | translate">Writer Name</label>
                    <input type="text" class="form-control" name="writerName" id="field_writerName"
                        [(ngModel)]="book.writerName" />
                </div>

                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="jdLdemoApp.book.writer" for="field_writer">Writer</label>
                    <select class="form-control" id="field_writer" name="writer" [(ngModel)]="book.writer"  required>
                        <option *ngIf="!editForm.value.writer" [ngValue]="null" selected></option>
                        <option [ngValue]="authorOption.id === book.writer?.id ? book.writer : authorOption" *ngFor="let authorOption of authors; trackBy: trackAuthorById">{{authorOption.writerName}}</option>
                    </select>
                </div>
                <div [hidden]="!(editForm.controls.writer?.dirty && editForm.controls.writer?.invalid)">
                    <small class="form-text text-danger"
                        [hidden]="!editForm.controls.writer?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                    </small>
                </div>
            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
